<template>
	<view>
		<view class=""
			style="display: flex;flex-direction: row-reverse;align-items: center;margin-right: 20rpx;margin-top: 20rpx;">
			<u-button type="primary" @click="addWaiterInfo" size="medium">添加</u-button>
		</view>
		<view class="" style="width: 100%;height: 150rpx;padding:0 20rpx;margin-top: 20rpx;" v-for="item in waiterList"
			:key="item.id">

			<view class="aaa" @click="openPhone(item.phone)"
				style="width: 100%;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-radius: 20rpx;">
				<view class=""
					style="display: flex;flex-direction: column;margin-left: 20rpx;justify-content: space-around;font-size: 30rpx;">
					<view style="padding-bottom: 10rpx;">
						姓名：{{item.name}}
					</view>
					<view>
						电话：{{item.phone}}
					</view>
				</view>
				<view style="display: flex;flex-direction: row;margin-right: 20rpx;">
					<u-button type="error" @click="deleteWaiter(item.id)" size="mini">删除</u-button>
					<u-button type="success" @click="editWaiter(item.id)" style="margin-left: 20rpx;"
						size="mini">编辑</u-button>
					<u-button v-if="orderCode" size="mini" type="warning" style="margin-left: 20rpx;"
						@click="paidan(item.id)">派单</u-button>
				</view>
			</view>
		</view>
		<u-modal show-cancel-button=true v-model="modalShow" @confirm="okFinsh" content="确认删除？"></u-modal>
		<u-modal show-cancel-button=true v-model="modalpai" @confirm="paidanFinsh" content="确认派单？"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderCode: '',
				waiterList: [],
				modalShow: false,
				id: '',
				modalpai: false,
				waiterId: '',
				orderCodeId: ''
			}
		},
		onShow() {
			this.getwaiter()
		},
		onLoad(e) {
			this.getwaiter()
			console.log("我是订单id");
			console.log(e.orderCode);
			this.orderCode = e.orderCode
			this.orderCodeId = e.id
		},
		methods: {
			getwaiter() {
				console.log("获取服务人员列表");
				this.$u.get('life/shop/waiter/page', {
					orderCode: this.orderCode
				}).then(res => {
					console.log("我是服务人员列表");
					console.log(res)
					this.waiterList = res.list
				}).catch(() => {
					this.$refs.uToast.show({
						title: "请求失败",
						type: 'error',
					})
				})
			},
			addWaiterInfo() {
				console.log("添加服务人员");
				uni.navigateTo({
					url: '/pages/common/addWaiterInfo/addWaiterInfo'
				})
			},
			//删除服务人员
			deleteWaiter(e) {
				this.modalShow = true
				this.id = e

			},
			//修改人员信息
			editWaiter(e) {
				uni.navigateTo({
					url: '/pages/common/addWaiterInfo/addWaiterInfo?id=' + e
				})
			},
			okFinsh() {
				let delArr = []
				delArr.push(this.id)
				this.$u.delete('life/shop/waiter/delete', delArr).then(res => {
					console.log(res)
					if (res.success) {
						this.$refs.uToast.show({
							title: "删除成功",
							type: 'success',
						})
					} else {
						this.$refs.uToast.show({
							title: "删除失败",
							type: 'error',
						})
					}
					this.getwaiter()

				}).catch(() => {
					this.$refs.uToast.show({
						title: "请求失败",
						type: 'error',
					})
				})
			},
			openPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					complete() {
						console.log('')
					}
				});

			},
			paidan(e) {
				this.waiterId = e
				this.modalpai = true
			},
			paidanFinsh() {
				this.$u.put('life/order//bind/waiter', {
					waiterId: this.waiterId,
					orderProcessStatus: '3',
					id: this.orderCodeId
				}).then(res => {
					console.log(res)
					if (res.success) {
						this.$refs.uToast.show({
							title: "派单成功",
							type: 'success',
						})
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$refs.uToast.show({
							title: "派单失败",
							type: 'error',
						})
					}


				}).catch(() => {
					this.$refs.uToast.show({
						title: "请求失败",
						type: 'error',
					})
				})
			}
		}
	}
</script>

<style>
	.aaa {
		/* background-image: -moz-linear-gradient(45deg, rgb(153, 133, 255), rgb(29, 218, 255));
	
	background-image: -webkit-linear-gradient(45deg,rgb(153, 133, 255), rgb(29, 218, 255));
	
	background-image: linear-gradient(45deg,rgb(153, 133, 255),rgb(29, 218, 255)); */
		background-color: #f0f0f0;
	}
</style>